<%@ include file="/WEB-INF/views/commonJSTL.jsp" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>${s_UserPharmacy.pharmacy.name}</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<%@ include file="/WEB-INF/views/commonResources.jsp" %>
<style type="text/css">
.printable {border: 1px dotted #CCCCCC ;padding: 10px 10px 10px 10px ;}
            .myBox {margin: 0 auto;border: 0px solid #fff;color: #000;/*letra color*/height: 35px;padding: 1px;font-size: 14px; font-weight: bold; text-align: center;font-family: arial;background-color: #e5fafc;
                border-top-left-radius:     10px 10px;
                border-top-right-radius:    10px 10px;
                border-bottom-right-radius: 10px 10px;
                border-bottom-left-radius:  10px 10px;
                vertical-align:text-bottom; }
            .verListaPasajeros{margin: 0 auto;border: 0px solid #fff;color: #FFF;font-size: 14px;text-align: center;font-family: arial;background-color: #FD8326;
                border-top-left-radius:     10px 10px;
                border-top-right-radius:    10px 10px;
                border-bottom-right-radius: 10px 10px;
                border-bottom-left-radius:  10px 10px;
                cursor: pointer;vertical-align:text-bottom;}
            .diaActual{margin: 0 auto;border: 0px solid #fff;color: #000;font-size:34px;text-align: center;font-family: arial;background-color: #76c8f6;background: -moz-linear-gradient(top, #76c8f6 0%, #edfcff 100%); background: -webkit-linear-gradient(top, #76c8f6 0%,#edfcff 100%);border-top: 2px solid #76c8f6;border-bottom: 2px solid #99d6f8;border-left: 2px solid #99d6f8;border-right: 2px solid #99d6f8;
			border-top-left-radius:     10px 10px;
			border-top-right-radius:    10px 10px;
			border-bottom-right-radius: 10px 10px;
			border-bottom-left-radius:  10px 10px;
			vertical-align:text-bottom;}
            /* para el boton incrementar o decrementar precio*/
            .tamanio{ height:25px; width:25px; background:orange; }
            .tamanio:hover{ color:#FFF;}
            /* para formulario dinamico*/
            #scroll {width:100%;height:490px;overflow:auto;}
            /* para la factura*/
            .scrollDestinos{width: 100%;height:390px;background-color:#FFFFFF;overflow:auto;}
            .miScrollSalidas{width:100px;height:520px;background-color:#FFFFFF;overflow:auto;}
            .colorBody{background: #fafafa;/* medio oficial : F1F2F5,ededc9,f0f0f0*/}
            .manifiesto{font-size: 10px; font-family: arial; line-height:11px;}
            .manifiesto label{font-weight: bold}
            .manifiesto table{width: 182pt;}
            .manifiesto table td{font-size: 10px;font-family: arial; font-weight: normal}
            .manifiesto table th{font-size: 10px;font-family: arial; font-weight: bold}
            label.error{background-color: #BC1010;border-radius: 4px 4px 4px 4px;color: white;font-size: 10px; font-family: sans-serif;margin-left: 10px;margin-top: -3px;padding: 0px 2px;left: 79%;position: absolute;
            }
            label.error:before{border-color: transparent #BC1010 transparent transparent;border-style: solid;border-width: 4px 6px;content: "";display: block;height: 0;left: -12px;/*-12*/position: absolute;top: 6px;width: 0;}
            /* para la factura*/
            .miScroll{width: 19em;height:520px;background-color:#FFFFFF;overflow:auto;}
            
            .form_labelVender { float:left; width:29%; text-align:right;}


.errores{
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border-radius:10px;
    -webkit-border-radius: 10px;
    background: red;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    color: #fff;
    display: none;
    font-size: 12px;
    margin-top: -40px;
    margin-left: 250px;
    padding: 10px;
    position: absolute;
}
.errores:before{ /* Este es un truco para crear una flechita */
    content: '';
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #BC1010;
    border-left: 8px solid transparent;
    left: -16px;
    position: absolute;
    top: 5px;
}

label.error{background-color: #BC1010;border-radius: 4px 4px 4px 4px;color: white;font-size: 10px; font-family: sans-serif;margin-left: 10px;margin-top: -3px;padding: 0px 2px;left: 79%;position: absolute;
            }
label.error:before{border-color: transparent #BC1010 transparent transparent;border-style: solid;border-width: 4px 6px;content: "";display: block;height: 0;left: -12px;/*-12*/position: absolute;top: 6px;width: 0;}
            

.form_labelVender { float:left; width:29%; text-align:right;}
</style>
<script type="text/javascript">
//Creamos dos variables que tendrán las expresiones regulares a ser comprobadas
//Una para el correo y otra para verrficar solo letras
var expr = /^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/;
var expr1 = /^[a-zA-Z]*$/;

$(document).ready(function () {
	$("#form-login").validate({
		/* rules: {
             'userpharmacy.userId.login': {
            	 remote: "validateUsernameUnique"
             }      
         },	         
         messages:{
             'userpharmacy.userId.login':{
                 remote: jQuery.format("User {0} already exists")
             }
         },  */
        submitHandler: function(form) {
       		form.submit();
        }
    }); 
	
	
  $("#boton").click(function (){ //función para el boton de enviar
      //recolectamos en variables, lo que tenga cada input.
      //Para mejor manipulación en los if's
      var nombre = $("#nombre").val();
      var apellidos = $("#apellidos").val();
      var correo = $("#correo").val();
      var passw = $("#pass").val();
      var repass = $("#repass").val();

      //Secuencia de if's para verificar contenido de los inputs

      //Verifica que no este vacío y que sean letras
      if(nombre == "" || !expr1.test(nombre)){
          $("#mensaje1").fadeIn("slow"); //Muestra mensaje de error
          return false;                  // con false sale de la secuencia
      }
      else{
          $("#mensaje1").fadeOut();   //Si el anterior if cumple, se oculta el error

          if(apellidos == "" || !expr1.test(apellidos)){
              $("#mensaje2").fadeIn("slow");
              return false;
          }
          else{
              $("#mensaje2").fadeOut();

              if(correo == "" || !expr.test(correo)){
                  $("#mensaje3").fadeIn("slow");
                  return false;
              }
              else{
                  $("#mensaje3").fadeOut();

                  if(passw != repass){
                      $("#mensaje4").fadeIn("slow");
                      return false;
                  }
              }
          }
      }

  });//fin click

  /*Las siguientes funciones son una mejora al ejemplo anterior que mostré
   * Si el mensaje se mostró, el usuario tenía que volver a oprimir el boton
   * de registrar para que el error se ocultará (si era el caso).
   *
   *Con estas funciones de keyup, el mensaje de error se muestra y
   * se ocultará automáticamente, si el usuario escribe datos admitidos.
   * Sin necesidad de oprimir de nuevo el boton de registrar.
   *
   * La función keyup lee lo último que se ha escrito y comparamos
   * con nuestras condiciones, si cumple se quita el error.
   *
   * Es cuestión de analizar un poco para entenderlas
   * Cualquier duda, comenten
   * */
  $("#nombre, #apellidos").keyup(function(){
      if( $(this).val() != "" && expr1.test($(this).val())){
          $("#mensaje1, #mensaje2").fadeOut();
          return false;
      }
  });

  $("#correo").keyup(function(){
      if( $(this).val() != "" && expr.test($(this).val())){
          $("#mensaje3").fadeOut();
          return false;
      }
  });

  var valido=false;
  $("#repass").keyup(function(e) {
      var pass = $("#pass").val();
      var re_pass=$("#repass").val();

      if(pass != re_pass)
      {
          $("#repass").css({"background":"#F22" }); //El input se pone rojo
          valido=true;
      }
      else if(pass == re_pass)
      {
          $("#repass").css({"background":"#8F8"}); //El input se ponen verde
          $("#mensaje4").fadeOut();
          valido=true;
      }
  });//fin keyup repass

});//fin ready

</script>
</head>

<body>
<div id="top-wrap">
	<%@include file="../../../head.jsp"  %>
	<div id="bodySpace">
		
	    <div class="clearfix" id="middle" style="position: absolute">  <!-- aqui va la ruta -->
	        <!-- aqui va el arbol de entrada -->
	        <div id="breadcrumb">
	            <ul>
                    <li><a href="<spring:url value="/mainFront?" htmlEscape="true" />">Home</a></li>	
                    <li><span style="color:#666"><fmt:message key="title.configuration"/></span></li>		
                    <li><span style="color:#666"><fmt:message key="title.activePrincipleProducts"/></span></li>		
                    <li class="current-page"><span class="end"><span class="middle"><fmt:message key="title.products"/></span></span></li>
                </ul>
	        </div>
	    </div>
	    
	    <div id="principal">
            <!-- izquierda -->
            <div class="cuerpo2y" style="border: 0px solid"><br/><br/><!-- estos break son necesarios ya q uso absolute en css  cuerpo izquierdo-->
                <div class="izq">
					<%@include file="../../../bodyIzq.jsp" %>	
                </div>
                
                <div class="medio" style="border: 0px solid">
					<h2 class="decorado">soy p en farmasoft</h2></br></br> 
					<div id="imgLoad" style="float: left;width: 100%;display: none;"><img src="<c:url value="/resources/images/imgLoad/ajax-loader.gif" />" width="32" height="32" alt="ajax-loader.gif" style="position:absolute; top:30%; left:50%;"/></div> 
                	<div id="cuerpo">
		            	<form id="form-login" action="agregar.php" method="post" >
		  <!-- 
		                    <p><label for="nombre">Nombre:</label></p>
		                        <input name="nombre" type="text" id="nombre" class="nombre" placeholder="Pon tu nombre" autofocus=""/ ></p>
		                        <div id="mensaje1" class="errores"> Ingresa solo caracteres</div>
		 					   -->
		 					<div style="clear:both;">
								<label class="form_align43" for="nombre">Nombre:</label>
								<input name="nombre" type="text" id="nombre" class="nombre" placeholder="Pon tu nombre" autofocus="" title="nombresss" />
		                        <!-- <div id="mensaje1" class="errores" style="margin-left: 43%;"> Ingresa solo caracteres</div> -->
		                        <label class="error">*</label>
							</div>
							 
							 <!-- 
							<div id="facturaGrupal">
			                    <div style="clear:both;"><label class="form_labelVender">Cliente :</label><input size="15" type="text" name="nombreFacturaGrupal" id="nombreFacturaGrupal" class="form_input_align required" title="Ingrese el cliente para la factura"/></div>
			                    <div style="clear:both;"><label class="form_labelVender">Nit :</label><input size="15" type="text" name="nitGrupal" id="nitGrupal" class="form_input_align required number" title="Ingrese el NIT"/></div>
                    		</div><br/>
							 
							  -->
		                    <!--=============================================================================================-->
		                    <!-- En seguida de cada input se agregará un div con el mensaje de error-->
		                    <p><label for="apellidos">Apellidos:</label></p>
		                        <input name="apellidos" type="text" id="apellidos" class="apellidos" placeholder="Pon tus apellidos" /></p>
		                        <div id="mensaje2" class="errores"> Ingresa solo caracteres</div>
		                    <!--=============================================================================================-->
		 
		                    <p><label for="correo">Correo:</label></p>
		                        <input name="correo" type="text" id="correo" class="correo" placeholder="Pon tu mail" /></p>
		                        <div id="mensaje3" class="errores"> Mail no valido</div>
		 
		                    <p><label for="pass">Password:</label></p>
		                        <input name="pass" type="password" id="pass" class="pass" placeholder="Pon tu contraseña"/ ></p>
		 
		                    <p><label for="repass">Repetir Password:</label></p>
		                        <input name="repass" type="password" id="repass" class="repass" placeholder="Repite contraseña" /></p>
		 
		                    <p id="bot"><input name="submit" type="submit" id="boton" value="Registrar" class="boton"/></p>
		                    
		                    <input type="button" value="agregar" name="action"  class="boton buttonSave" title="presione aqui" />
		                </form>
		            	<div id="pie">Sistema de Login Y Registro</div>                
		            </div>
                </div>
                
               
            	
            </div><!--end of leftPan-->
            
            <div class="yDer" style="border: 1px solid #ccc;">
                  <%@include file="../../../notices.jsp" %>                       
            </div><!--end of rightPan-->
        </div><!--end main content -->
	</div>
</div>
</body>
</html>
